<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
<!-- href=# 让超链接不做跳转操作
 href="" 让超链接跳转到当前页面-->
<a v-if="!isLogin" href="#" @click="login()">登录</a>
    <span v-if="isLogin">
    <a href="#" @click="logout()">登出</a>
    <input type="text" v-model="name">
<input type="button" value="添加" @click="add()">
    </span>
<hr>
<ul>
    <li v-for="name in arr">{{name}}</li>
</ul>
</div>
<!--引入vue框架-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    let v=new Vue({
        el:"div",
        data:{
            isLogin:false,
            arr:["刘备","关羽","张飞"],
            name:""
        },
        methods:{
            login:function () {
                alert("登录成功！")
                v.isLogin=true;
            },
            logout:function () {
                if (confirm("您确认退出登录吗？")){
                    v.isLogin=false;
                }
            },
            add:function () {
                //把和文本框双向绑定的变量添加到数组中
                v.arr.push(v.name);

            }
        }
    })
</script>
</body>
</html>